<template>
  <!-- common: page begin -->
  <div class = "container">
    <global-header v-bind:user="currentUser" />
    <Loader v-if="isLoading"></Loader>
    <router-view></router-view>
    <global-footer />
  </div>
  <!-- common: page end -->
</template>

<script lang = "ts">
import { defineComponent, computed, watch } from 'vue'
// 导入 vuex
import { useStore } from 'vuex'
// 导入 样式文件
import 'bootstrap/dist/css/bootstrap.min.css'
// 导入 组件
import GlobalHeader from '@/components/GlobalHeader.vue'
import GlobalFooter from '@/components/GlobalFooter.vue'
import Loader from '@/components/Loader.vue'
// 导入 消息提示
import createMessage from '@/assets/js/createMessage'
// 导入 全局数据
import { GlobalDataProps } from '@/assets/js/store'

// 对setup函数进行封装，返回options的对象
export default defineComponent({
  // 页面名称
  name: 'App',
  // 注册需要使用的组件
  components: {
    GlobalHeader, GlobalFooter, Loader
  },

  // 组合式api入口
  setup () {
    const store = useStore<GlobalDataProps>()
    // computed 计算属性
    const currentUser = computed(() => store.state.user)
    const isLoading = computed(() => store.state.loading)
    const error = computed(() => store.state.error)
    // 监听事件
    watch(() => error.value.status, () => {
      const { status, message } = error.value
      if (status && message) {
        createMessage(message, 'error')
      }
    })
    return {
      currentUser,
      isLoading,
      error
    }
  }
})
</script>

<style lang="css" scoped>
.container{
  width: 100%;
  min-width: 640px;
  max-width: 100%;
  padding: 0;
  margin: 0;
}
</style>
